<template>
  <div class="charts_shadow" ref="enterLabor" :style="{width:`${innerWidth*.192}px`,height:'100%'}">
    <div class="until_title_charts">进场劳务工种统计</div>
    <div ref="_enterLabor" style="width: 100%; margin-top: 5px; height: calc(100% - 40px)"></div>
  </div>
</template>

<script>
  import mixin from './../mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'enterLabor',
    mixins: [mixin],
    data () {
      return {
        enterLaborHeight: 140,
        chartData: [
        ]
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    watch: {
      currentUser () {
        this.getAttendanceInfo()
        if (this.currentUser.mid) {
          this.getElevatorMonitorInfo()
        }
      }
    },
    mounted () {
      this.initChart()
      this.getAttendanceInfo()
    },
    methods: {
      initChart () {
        let chart = this.$echarts.init(this.$refs._enterLabor)
        let echartOption = {
          color: ['#9f81ff', '#2cdef2', '#abd454', '#29a2fe', '#2a80e4', '#39ffa4'],
          tooltip: {
            trigger: 'item',
            formatter: '{b} ({d}%)'
          },
          calculable: true,
          polar: {},
          angleAxis: {
            axisLine: {
              lineStyle: {
                color: '#1e68bd'
              }
            }
          },
          radiusAxis: {
            min: 0,
            max: 10,
            interval: 2,
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,0)',
                type: 'dashed'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#1e68bd',
                type: 'dashed'
              }
            }
          },
          series: [
            {
              type: 'pie',
              radius: [10, 70],
              // center: ['75%', '50%'],
              roseType: 'area',
              label: {
                formatter: '{a|{b}:}   {b|{c}}',
                color: '#01dcf3',
                rich: {
                  a: {
                    color: '#90a7b9'
                  },
                  b: {
                    color: '#01dcf3'
                  }
                }
              },
              labelLine: {
                length: 1,
                length2: 20
              },
              data: this.chartData
            }
          ]
        }
        chart.setOption(echartOption)
        window.addEventListener('resize', () => {
          chart.resize()
        })
      },
      getAttendanceInfo () {
        let data = {
          stageId: this.currentUser.stageId,
          dateTime: this.currentUser.dateTime
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getAttendanceInfo`,
          data: this.$qs.stringify(data)
        }).then(res => {
          let data = res.data
          if (!data.data) {
            this.chartData = []
            this.initChart()
            return
          }
          this.chartData = []
          data.data.forEach((item, index) => {
            let arr = {}
            Object.assign(arr, {'value': item.totalNum})
            Object.assign(arr, {'name': item.professionName})
            this.chartData.push(arr)
          })
          this.initChart()
        })
      }
    }
  }
</script>
